<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <p>count 值：{{ count }}</p>
    <p>总价： {{ $store.getters.totalPrice  }}</p>
    <p>总价： {{ totalPrice  }}</p>
    <button @click="add" class="btn btn-primary">+1</button>
    <button @click="$store.commit('addCountWithNum', 5)" class="btn btn-primary">+5</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
  name: 'Left',
  computed: {
    ...mapState(['count']),
    ...mapGetters(['totalPrice'])
  },
  methods: {
    add () {
      // 不要直接改vuex的数据
      // 原因一：调试工具无法追踪到改变
      // 原因二：如果开启了vuex的严格模式，还会报错
      // this.$store.state.count++

      // 调用
      this.$store.commit('addCount')
    }
  }
}
</script>

<style>
</style>
